<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" label-suffix="：" class="demo-form-inline" label-width="100px" label-position="right">
      <el-form-item label="订单编号">
        <el-input v-model="formInline.number" placeholder="订单编号" />
      </el-form-item>
      <el-form-item label="下单商家">
        <el-select v-model="formInline.store" placeholder="请选择下单商家">
          <el-option v-for="item in store_list" :key="item.id" :label="item.title" :value="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getData">查询</el-button>
        <el-button size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      :header-cell-style="{
        textAlign: 'center',
        color: '#909399',
        backgroundColor: '#f8f8f8',
      }"
    >
      <el-table-column label="订单编号" prop="order_id" align="center" width="120" />
      <el-table-column label="下单商家" prop="store" align="center">
        <template #default="{ row }">{{ row.store_info.title }}</template>
      </el-table-column>
      <el-table-column label="商品信息" prop="goods_name" align="center" width="400">
        <template #default="{ row }">
          <div>
            <div v-for="(item, idx) in row.goods_detail" class="goods_info_box">
              <div class="goods_img">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="$baseUrl + item.goods_img"
                  :preview-src-list="[$baseUrl + item.goods_img]"
                />
              </div>
              <div class="info">
                <div class="info_name">名称：{{ item.goods_name }}</div>
                <div>
                  价格：￥
                  {{ item.goods_price - item.goods_preferential }}
                </div>
                <div>数量：{{ item.num }}</div>
                <div class="info_name">规格：{{ item.attr }}</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单信息" prop="goods_name" align="center" width="250">
        <template #default="{ row }">
          <div class="order_info">
            <div>订单类型：{{ row.order_type == 1 ? '自提' : '外卖' }}</div>
            <div v-if="row.order_type == 1">取餐类型：{{ row.meal_pickup_type == 1 ? '堂食' : '外带' }}</div>
            <div v-if="row.order_type == 2">配送地址：{{ row.address + row.detailed_address }}</div>
            <div v-if="row.order_type == 2">联系人：{{ row.contacts }}</div>
            <div>联系电话：{{ row.phone }}</div>
            <div>备注：{{ row.remarks }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单总价(￥)" prop="order_total" align="center" />
      <!-- <el-table-column label="订单类型" prop="order_type" align="center">
        <template #default="{ row }">
          <el-tag>{{ row.order_tyope == 1 ? '自提' : '外卖' }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="订单状态" prop="order_status" align="center">
        <template #default="{ row }">
          <el-tag :type="row.order_status == 1 ? '' : row.order_status == 2 ? 'warning' : row.order_status == 3 ? 'success' : 'danger'">
            {{ row.order_status == 1 ? '待支付' : row.order_status == 2 ? '待评价' : row.order_status == 3 ? '已完成' : '已取消' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" prop="order_time" align="center" />
      <!-- <el-table-column label="操作" prop="handle" align="center">
        <template>
          <el-button size="small">查看详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <pagination
      v-show="formInline.total > 0"
      :total="formInline.total"
      :page.sync="formInline.page"
      :limit.sync="formInline.limit"
      @pagination="getData"
    />
  </div>
</template>

<script>
  import { get_list } from '@/api/order'
  import { get_store_list } from '@/api/store'
  import Pagination from '@/components/Pagination'
  export default {
    components: { Pagination },
    data() {
      return {
        listLoading: false,
        formInline: {
          total: 10,
          page: 1,
          limit: 10,
        },
        tableData: [],
        store_list: [],
      }
    },
    created() {
      this.getData()
      this.getStoreList()
    },
    methods: {
      async getData() {
        this.listLoading = true
        await get_list(this.formInline).then(({ data }) => {
          console.log('data: ', data)
          this.tableData = data.list
          this.formInline.total = data.total
          this.tableData.forEach((item) => {
            item.goods_detail = item.goods_detail.replace('\r\n', '').replace(' ', '')
            item.goods_detail = JSON.parse(item.goods_detail)
            console.log('item.store_info: ', item.store_info)
            item.store_info = JSON.parse(item.store_info)
          })
          console.log('this.tableData: ', this.tableData)
        })
        this.listLoading = false
      },
      async getStoreList() {
        await get_store_list().then(({ data }) => {
          this.store_list = data.list
        })
      },
      reset() {
        this.formInline = {
          total: 10,
          page: 1,
          limit: 10,
        }
        this.getData()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .goods_info_box {
    margin-bottom: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    .goods_img {
      padding: 1px;
      display: flex;
      border-radius: 10px;
      border: 1px solid #ccc;
    }
    .info {
      margin-left: 10px;
      text-align: left;
      line-height: revert;
      .info_name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 270px;
      }
    }
  }
  .order_info {
    text-align: left;
  }
</style>
